<template>

    <div class="navigation">
        <el-steps :space="200" :active="active" finish-status="success" align-center="true" style="margin-bottom: 50px;">
            <el-step title="载入页面"></el-step>
            <el-step title="邮箱填写" :status="fillStatus"></el-step>
            <el-step title="邮件发送" :status="sendStaus"></el-step>
        </el-steps>

        <div>
            <el-input
            placeholder="请输入邮箱"
            v-model="email"
            clearable
            :disabled="isEdit"
            prefix-icon="el-icon-receiving"
            style="width: 32%; margin-left: 6%">
            </el-input>
        </div>
        <div style="margin-top: 50px; margin-left: 6%">
            <el-button type="success" icon="el-icon-caret-left" @click="previouStep">上一步</el-button>
            <el-button type="success" icon="el-icon-caret-right" @click="forgetPassword" v-if="isNext" style="margin-left: 19%">下一步</el-button>
        </div>
    </div>   
</template>

<script>

export default {
  name: 'Email',
  data() {
    return {
      email: "",//邮箱内容
      isEdit: false,//设置输入框能否编辑
      active: 1,//当前处于哪个流程
      fillStatus: "finish",//设置状态
      sendStaus: "wait",
      isNext: true//控制下一步 是否先手
    }
  },
  methods: {
      //上一步按钮执行方法，到达最前，则直接返回到登录页
      previouStep: function() {  
          if(this.active == 1) {
            this.$router.replace({path: '/login'});//跳转到登录页
          }else if(this.active == 2) {
            this.active--;
            this.isEdit = false;
            this.isNext = true;
            this.fillStatus = "finish";
            this.sendStaus = "wait";
          }      
      },
      forgetPassword: function(){
        //邮箱必输，不然不然下一步
        if(this.email == "") {
            this.$message.error('邮箱未填写');
            return;
        }
        //根据所处流程判断是否发送请求
        if(this.active <= 1) {
            this.active++;
            this.fillStatus = "success";
            this.sendStaus = "finish";
            this.isEdit = true;//邮箱输入框设置为不可编辑
        }else if(this.active == 2) {         
            this.axios({
                url: '/forgetPassword',   
                method: 'post',      
                data: {              
                    email: this.email
                }
            }).then(res=>{
                //请求成功，则改变流程状态，显示提示信息,隐藏下一步按钮，若根据邮箱查不到信息，则直接抛出错误提示
                debugger;
                let data = res.data;
                this.isNext = false;
                if(data.success) {
                    this.$message({
                        message: data.tip,
                        type: 'success'
                    });
                    this.sendStaus = "success";
                }else if(data.message != "") {
                    this.sendStaus = "error";
                    this.$message.error(data.message);
                }
            }).catch(()=>{
                this.sendStaus = "error";
                this.$message.error('请求发送失败');
            })

        }
      }
  }
}
</script>

<style>
    .navigation {
        margin: 10% auto 50px auto;
        padding-left: 30%;
      
    }
</style>